<template>
  <div class="body">
    <!-- 确认嫌疑人预留退款银行卡 -->
    <div class="bank_msg">
      <p class="title_box">确认嫌疑人预留退款银行卡</p>
      <div class="msg on-active">
        <el-form :model="form" :rules="rules" ref="updateForms">
          <div>
            <p class="title"><span>*</span>与本人关系</p>
            <p class="text">
              <el-radio-group v-model="relationships_id" @change="radioChange">
                <el-radio :value="item.value" v-for="(item,index) in radioList" :key="index">{{item.label}}</el-radio>
              </el-radio-group>
            </p>
          </div>
          <div>
            <p class="title"><span>*</span>姓名</p>
            <el-form-item prop="card_name" style="width: 100%;">
              <p :class="isDisabled ? 'input on' : 'input'">
                <el-input
                  :disabled="isDisabled"
                  placeholder="请输入姓名"
                  size="medium"
                  v-model="form.card_name"
                ></el-input>
              </p>
            </el-form-item>
          </div>
          <div>
            <p class="title"><span>*</span>身份证号码</p>
            <el-form-item prop="card_idcard" style="width: 100%;">
              <p :class="isDisabled ? 'input on' : 'input'">
                <el-input
                  :disabled="isDisabled"
                  placeholder="请输入身份证号码"
                  size="medium"
                  v-model="form.card_idcard"
                ></el-input>
              </p>
            </el-form-item>
          </div>
          <div>
            <p class="title"><span>*</span>开户行名称</p>
            <el-form-item prop="bank_name" style="width: 100%;">
              <p :class="isDisabled ? 'input on' : 'input'">
                <el-input
                  :disabled="isDisabled"
                  placeholder="请输入开户行名称"
                  size="medium"
                  v-model="form.bank_name"
                ></el-input>
              </p>
            </el-form-item>
          </div>
          <div>
            <p class="title"><span>*</span>银行卡卡号</p>
            <el-form-item prop="card_number" style="width: 100%;">
              <p :class="isDisabled ? 'input on' : 'input'">
                <el-input
                  :disabled="isDisabled"
                  placeholder="请输入银行卡卡号"
                  size="medium"
                  v-model="form.card_number"
                ></el-input>
              </p>
            </el-form-item>
          </div>
          <div>
            <p class="title"><span>*</span>手机号</p>
            <el-form-item prop="card_mobile" style="width: 100%;">
              <p :class="isDisabled ? 'input on' : 'input'">
                <el-input
                  :disabled="isDisabled"
                  placeholder="请输入手机号"
                  size="medium"
                  v-model="form.card_mobile"
                ></el-input>
              </p>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <div class="bank_msg" style="margin-top:22px">
      <p class="title_box">退款方式</p>
      <div class="msg on-active1">
        <el-radio-group v-model="tk_type">
          <el-radio :value="0">原路优先</el-radio>
          <el-radio :value="1">预留优先</el-radio>
        </el-radio-group>
      </div>
    </div>

    <!-- 上传作证材料原件 -->
    <div class="book_msg">
      <div class="anniu_title">
        <p class="title_box">执行取保候审</p>
        <el-button
          size="mini"
          type="primary"
          @click="handleUpload"
        >上传文件</el-button>
      </div>
      <div class="msg">
        <file-upload
          ref="uploadRef"
          :bailId="bailId"
          :disabled="false"
          :accept="'.pdf,.png'"
          :groupId="1"
          :limit="3"
          :fileList="fileList"
          @update:file-list="handleUpdateFileList"
          @success="handleSuccess"
        />
        <div class="up_msg">
          <p class="name"><span>*</span>作证材料原件</p>
          <p class="text">1.请上传清晰的取保候审报告书</p>
          <p class="text">2.图片大小不要超过10M</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref,onMounted,defineExpose,defineProps, defineEmits } from "vue";

import { getPublic,getAttachment } from "@/api/public";

const props = defineProps({
  bailId: {
    type: Number,
  },
});

let radioList = ref([])

let relationships_id = ref(1);
let form = ref({
  card_name: '',
  card_idcard:'',
  bank_name:'',
  card_number:'',
  card_mobile:''
});
let isDisabled = ref(true);

const radioChange = (e) => {
  console.log(e);
  if (e > 1) {
    isDisabled.value = false;
    form.value = {
      card_name: '',
      card_idcard:'',
      bank_name:'',
      card_number:'',
      card_mobile:''
    };
  } else {
    isDisabled.value = true;
    form.value = {
      card_name: '',
      card_idcard:'',
      bank_name:'',
      card_number:'',
      card_mobile:''
    };
  }
};

onMounted(() => {
  getPublicSource()
});

const emit = defineEmits(["fileList"]);

// 获取公共数据
const getPublicSource = async()=>{
  await getPublic().then(res=>{
    if(res.code == 1){
      radioList.value = res.data.relationships
    }
  })
}

// 获取上传文件
let fileList = ref([])
const getFile = async () => {
  await getAttachment({ bail_id: props.bailId }).then((res) => {
    res.data.map(item=>{
      fileList.value.push({
        name: item.filename,
        url: item.url,
      })
    })
  });
};

// 上传
const uploadRef = ref(null);
const handleUpload = ()=>{
  uploadRef.value.submitUpload()
}

// 上传成功
const handleSuccess = (response) => {
  emit("fileList", response);
};

const handleUpdateFileList = (newList) => {
  console.log("Updated file list:", newList);
};

const rules = reactive({
  card_name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  card_idcard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
  ],
  bank_name: [
    { required: true, message: '请输入开户行名称', trigger: 'blur' },
  ],
  card_number: [
    { required: true, message: '请输入银行卡卡号', trigger: 'blur' },
  ],
  card_mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
  ],
})

let tk_type = ref(0)

const updateForms = ref()
const stepTowSubmit = async () => {
 await updateForms.value.validate()


  // await updateDepartment(obj).then(res=>{
  //   if(res.code == 1){
  //     ElNotification({ message: res.msg, type: "success" });
  //     closeDrawer(true)
  //   }else{
  //     loading.value = false
  //     ElNotification.error(res.msg)
  //   }
  // })
}
defineExpose({
  updateForms,
  relationships_id,
  form,
  tk_type
});
</script>

<style lang="scss" scoped>
.title_box {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 15px;
}
.bank_msg {
  margin: 0 30px;
  .on-active1{
    padding-top:10px !important;
    .el-radio-group{
      display: inline-grid;
    }
  }
  .on-active{
    ::v-deep .el-radio__inner{
      border-radius: 0;
      width: 16px;
      height: 16px;
    }
    ::v-deep .el-radio__input.is-checked .el-radio__inner::after {
      content: "";
      width: 8px;
      height: 4px;
      border: 2px solid white;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 3px;
      left: 2px;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }
  }
 
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 0 20px 10px 20px;
    div {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;
      line-height: 70px;
      .title {
        width: 120px;
        display: flex;
        align-items: center;
        span {
          color: red;
          margin-right: 6px;
          position: relative;
          top: 2px;
        }
      }
      
      .input {
        width: 50%;
        border: 1px solid #aaa;
        height: 38px;
        padding: 0 16px;
        border: 1px solid #c8c8c8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        &.on {
          background: #e5e5e5;
        }
      }
      ::v-deep .el-input__inner {
        border: none !important;
        padding: 0;
        margin: 0;
        background: none;
      }
    }
  }
}
.book_msg {
  margin: 0 30px;
  margin-top: 32px;
  .anniu_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .title_box{
      margin-bottom:0;
    }
  }
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 10px 20px;
    padding-bottom: 20px;
    .up_msg {
      line-height: 30px;
      text-align: left;
      margin-left: 12px;
      display: block;
      .name {
        color: #666666;
        font-size: 14px;
        font-weight: 500;
        span {
          color: red;
          margin-right: 6px;
          position: relative;
          top: 2px;
        }
      }
      .text {
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
::v-deep.el-input.is-disabled .el-input__wrapper{
  background: none;
  box-shadow: none;
}
::v-deep .el-input__wrapper{
  background: none;
  border:none;
  box-shadow: none;
}
::v-deep .el-form-item{
  margin-bottom:0;
}
::v-deep .el-form-item.is-error .el-input__wrapper{
  box-shadow: none;
}
</style>
